<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Stacked Column with line - new config style</title>

    <link href="../../assets/styles.css" rel="stylesheet" />

    <style>
      
        #chart {
      max-width: 650px;
      margin: 35px auto;
    }
      
    </style>

    <script>
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
        )
    </script>

    
    <script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prop-types@15.8.1/prop-types.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script src="../../../dist/apexcharts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-apexcharts@1.7.0/dist/react-apexcharts.iife.min.js"></script>
    

    <script>
      // Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
      // Based on https://gist.github.com/blixt/f17b47c62508be59987b
      var _seed = 42;
      Math.random = function() {
        _seed = _seed * 16807 % 2147483647;
        return (_seed - 1) / 2147483646;
      };
    </script>

    
  </head>

  <body>
    
    <div id="app"></div>

    <div id="html">
      &lt;div id=&quot;chart&quot;&gt;
  &lt;ReactApexChart options={state.options} series={state.series} type=&quot;line&quot; height={350} /&gt;
&lt;/div&gt;
    </div>

    <script type="text/babel">
      const ApexChart = () => {
        const [state, setState] = React.useState({
          
            series: [
              {
                "name": "Line",
                "type": "line",
                "data": [
                  37,
                  38.3,
                  33.01,
                  30,
                  29.7,
                  30,
                  35.2,
                  44,
                  45,
                  41,
                  22,
                  22.5,
                  29.1,
                  25.5,
                  41.2,
                  43.8,
                  39,
                  23,
                  26,
                  22,
                  34,
                  37,
                  43,
                  41,
                  17
                ]
              },
              {
                "name": "Bar1",
                "type": "bar",
                "data": [
                  -1.57,
                  -1.83,
                  -0.29,
                  2,
                  0.23,
                  3,
                  0,
                  -0.77,
                  0,
                  0,
                  0,
                  -0.16,
                  -0.5,
                  -0.75,
                  -0.93,
                  -0.93,
                  -0.45,
                  0,
                  0,
                  -0.23,
                  -0.95,
                  -1.12,
                  -0.51,
                  0.76
                ]
              },
              {
                "name": "Bar2",
                "type": "bar",
                "data": [
                  -2.99,
                  -0.43,
                  0.39,
                  2.8,
                  0.23,
                  1.2,
                  -0.06,
                  -2.96,
                  -2.74,
                  -2.58,
                  -1.79,
                  -2.16,
                  -1.9,
                  -1.75,
                  -2,
                  -2.16,
                  -1.75,
                  -1.9,
                  -2.74,
                  -2.58,
                  -3.8,
                  -1.24,
                  -0.01,
                  1.89
                ]
              },
              {
                "name": "Bar3",
                "type": "bar",
                "data": [
                  0.09,
                  4,
                  4.83,
                  6.86,
                  3.86,
                  5,
                  1.7,
                  -1.21,
                  0,
                  0.02,
                  0.07,
                  -0.15,
                  -0.09,
                  0,
                  -0.61,
                  -1.75,
                  0,
                  -0.43,
                  -1.5,
                  -0.66,
                  -3.06,
                  0.06,
                  0.15,
                  1.48
                ]
              },
              {
                "name": "bar4",
                "type": "bar",
                "data": [
                  5.95,
                  5.86,
                  0.92,
                  -1.2,
                  -2.73,
                  -0.32,
                  0.12,
                  -0.55,
                  0.78,
                  0,
                  -1.73,
                  -2.52,
                  -1.26,
                  -0.8,
                  -0.75,
                  0,
                  -3,
                  0,
                  0.29,
                  0.3
                ]
              }
            ],
            options: {
              colors: [
                '#6a6ba5',
                '#f9a867',
                '#2a6b9b',
                '#6c98b7',
                '#abc4d6',
                '#d5e2eb'
              ],
              chart: {
                height: 350,
                width: '90%',
                type: 'line',
                stacked: true,
                zoom: {
                  enabled: true,
                  type: 'x'
                }
              },
              tooltip: {
                followCursor: true,
                shared: false
              },
              responsive: [
                {
                  breakpoint: 480
                }
              ],
              markers: {
                size: 0,
                fillOpacity: 0,
                strokeOpacity: 0
              },
              stroke: {
                width: 2
              },
              xaxis: {
                categories: [
                  1,
                  2,
                  3,
                  4,
                  5,
                  6,
                  7,
                  8,
                  9,
                  10,
                  11,
                  12,
                  13,
                  14,
                  15,
                  16,
                  17,
                  18,
                  19,
                  20,
                  21,
                  22,
                  23,
                  24,
                  25
                ],
                type: 'numeric',
                tickPlacement: 'on',
                tickAmount: 'dataPoints',
                labels: {
                  showDuplicates: false,
                  formatter: function(value) {
                    // Value is undefined if all series are collapsed
                    return value !== undefined ? value.toFixed(0) : ''
                  }
                }
              },
              // In order to align the ticks of multiple yaxes with the charts horizontal grid
              // lines, the scaling of the first [unhidden] yaxis determines the number
              // of grid lines and hence the number of ticks for all subsequent yaxes, unless
              // they specify a tickAmount.
              // We want the stacked bars to have the best possible resolution
              // visually so they have been listed first.
              yaxis: [
                {
                  seriesName: ['Bar1','Bar2','Bar3','bar4']
                },
                {
                  seriesName: 'Line',
                  opposite: true
                }
              ],
              legend: {
                showForSingleSeries: true
              },
              fill: {
                opacity: 1
              }
            },
          
          
        });

        

        return (
          <div>
            <div id="chart">
                <ReactApexChart options={state.options} series={state.series} type="line" height={350} />
              </div>
            <div id="html-dist"></div>
          </div>
        );
      }

      const domContainer = document.querySelector('#app');
      ReactDOM.render(<ApexChart />, domContainer);
    </script>

    
  </body>
</html>
